<template>
    <div id="collect" v-title="title">
        <div class="title" @click="back()">
            <i class="iconfont icon-fanhui"></i>
            我的收藏
        </div>
        <div class="collect-btn">
            <div class="btn-list" :class="{'checked1' : on_off}" @click="Btn(1)"><span>文章</span></div>
            <div class="btn-list" :class="{'checked1' : !on_off}" @click="Btn(3)"><span>活动</span></div>
        </div>
        <!--列表展示-->
        <div id="mescroll" v-mescroll="{up:'upCallback',size:page.num,num:page.size}">
            <div class="mescroll-bounce">
                <div class="collect-box">
                    <!--文章-->
                    <div class="collect-list" v-for="col in collectText" v-if="on_off"  @click="goCollect(col.typeId)">
                        <div class="collect-list-img">
                            <img :src="$store.state.picHead + col.cover"/>
                        </div>
                        <div class="collect-list-right">
                            <div class="collect-text">{{col.title}}</div>
                            <div class="collect-data"><span>{{col.author}}</span>{{col.collectTime | dateFormate}}</div>
                        </div>
                    </div>
                    <!--活动-->
                    <div class="collect-ac" v-for="ac in activity" v-if="!on_off" @click="goActivity(ac.typeId)">
                        <div class="ac-img">
                            <img :src="$store.state.picHead + ac.cover"/>
                        </div>
                        <div class="ac-text">
                            <div class="ac-name">{{ac.title}}</div>
                            <div class="ac-time">{{ac.collectTime | dateFormate}}<span>{{ac.address}}</span></div>
                        </div>
                    </div>
                </div>
                <!--空空如也-->
                <div class="none" v-if="None">
                    <img src="../../assets/image/none.png"/>
                    <p>空空如也~</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {userService} from '../../service/userService'
    export default {
        data () {
            return {
                title: '我的收藏',
                on_off:true,
                None:false,
                type:1,
                collectText:'',
                activity:'',
                page:{num:1,size:10},
                busy:false,
                lastPage:false,
                totalPage:'',
            }
        },
        mounted: function() {
            let that = this;
            that.getListData()
        },
        methods:{
            upCallback: function () {
                const that = this;
                that.busy = true;
                that.getListData(that.page.num, that.page.size,function(curPageData) {
                    if(that.type === 1){
                        if(that.page.num == 1)  that.collectText = [];//如果是第一页需手动制空列表
                        that.collectText = that.collectText.concat(curPageData); //更新列表数据
//                        that.mescroll.endSuccess(curPageData.length);
                        if(that.page.num < that.totalPage){
                            that.busy = false
                        }else{
                            that.lastPage = true
                        }
                    }
                    if(that.type === 3){
                        if(that.page.num == 1)  that.activity = [];//如果是第一页需手动制空列表
                        that.activity = that.activity.concat(curPageData); //更新列表数据
//                        that.mescroll.endSuccess(curPageData.length);
                        if(that.page.num < that.totalPage){
                            that.busy = false
                        }else{
                            that.lastPage = true
                        }
                    }

                }, function() {
//                    that.mescroll.endErr(); //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                });
            },
            getListData:function(pageNum,pageSize,successCallback,errorCallback) {
                //延时一秒,模拟联网
                const that = this;
                userService.myCollect({pageNo:1,pageSize:10,type:that.type}).then(function(res){
                    if(res.data.success){
                        if(that.type === 1){
                            let collectList = res.data.datas.datas;
                            that.totalPage = res.data.datas.totalPage;
                            if(collectList.length === 0 && that.totalPage <= 1 && that.page.num === 1){
                                that.None = true;
                                successCallback&&successCallback(collectList);//成功回调
                            }else{
                                that.None = false;
                                that.collectText = collectList;
                                let dataArr = that.collectText;
                                let activity=[];
                                for (let i = 0; i < dataArr.length; i++) {
                                    activity.push(dataArr[i]);
                                }
                                successCallback&&successCallback(activity);//成功回调
                            }
                        }else if(that.type === 3){
                            let collectList = res.data.datas.datas;
                            that.totalPage = res.data.datas.totalPage;
                            if(collectList.length === 0 && that.totalPage <= 1 && that.page.num === 1){
                                that.None = true;
                                successCallback&&successCallback(collectList);//成功回调
                            }else{
                                that.None = false;
                                that.activity = collectList;
                                let dataArr = that.activity;
                                let activity=[];
                                for (let i = 0; i < dataArr.length; i++) {
                                    activity.push(dataArr[i]);
                                }
                                successCallback&&successCallback(activity);//成功回调
                            }
                        }
                    }else{
                        that.None = true;
                    }
                })
            },
            Btn:function(val){
                // 文章
                let that = this;
                that.page.num = 1;
                if(val === 1){
                    that.on_off = true;
                    that.type = 1;
                    that.upCallback();
                }
                //活动
                if(val === 3){
                    that.on_off = false;
                    that.type = 3;
                    that.upCallback();
                }
            },
            goCollect:function(val){
                let that = this;
                that.$router.push({name:'article',params:{artId:val}})
            },
            goActivity:function(val){
                let that = this;
                that.$router.push({name:'activity',params:{actId:val}})
            },
            //返回
            back:function(){
                let that = this;
                that.$router.push({name:'mycenter'})
            }
        },
    }
</script>

<style lang="less">
    @import url("../../assets/css/mescroll.min.css");

#collect{
    width:100%;
    position: relative;
    #mescroll{
        position: absolute;
        top:2.3rem;
        bottom: 0;
        left:0;
        right:0;
        margin:auto;
        background:#F9F9F9;
    }
    .title{
        width:100%;
        height: 1.1733rem;
        line-height: 1.1733rem;
        text-align: center;
        font-size: 0.48rem;
        color: #333;
        letter-spacing: 0.3px;
        background: #fff;
        border-bottom: 1px solid rgba(221, 221, 221, 0.5);
        z-index:100;
        i{
            font-size: .5rem;
            color: #999;
            text-align: left;
            position: absolute;
            top: 0;
            left: 0.2667rem;
        }
    }
    .collect-btn{
        width: 100%;
        height: 1.1rem;
        box-shadow: inset 0 -1px 0 0 #DDDDDD;
        background:#fff;
        .btn-list{
            width: 50%;
            height: 1.1rem;
            float: left;
            font-size: 16px;
            text-align: center;
            span{
                margin:0 1.5rem;
                line-height:1.1rem;
                display: block;
                text-align: center;
            }
        }
        .checked1 {
            /*color: #6699FF;*/
            span{
                line-height:1.05rem;
                /*border-bottom:2px solid #6699FF;*/
            }
        }
    }
    .collect-box {
        .collect-list {
            width: 100%;
            padding: 0.4rem 0.53rem;
            box-sizing: border-box;
            overflow: hidden;
            background: #fff;
            .collect-list-img {
                width: 3.04rem;
                height: 2.13rem;
                float: left;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .collect-list-right {
                width: 5.9rem;
                height: 2.13rem;
                float: left;
                padding-left: 0.27rem;
                box-sizing: border-box;
                overflow: hidden;
                .collect-text {
                    width: 100%;
                    height: 1.2rem;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    font-size: 16px;
                    color: #333333;
                }
                .collect-data {
                    width: 100%;
                    font-size: 12px;
                    color: #666666;
                    margin-top: 0.35rem;
                    span {
                        margin-right: .3rem;
                    }
                }
            }
        }
    }
    .collect-ac{
        width: 100%;
        padding: 0.4rem 0.53rem;
        box-sizing: border-box;
        overflow: hidden;
        background: #fff;
        .ac-img{
            width:100%;
            height:4.48rem;
            img{
                width:100%;
                height:100%;
            }
        }
        .ac-text{
            margin-top:0.27rem;
            .ac-name{
                width:100%;
                max-height:1.2rem;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                font-size: 16px;
                color: #333333;
                font-weight: bold;
            }
            .ac-time{
                width:100%;
                line-height:0.53rem;
                font-size: 14px;
                color: #666666;
                margin-top:0.13rem;
                span{
                    margin-left:0.3rem;
                }
            }
        }
    }
    .inifinte-text{
        background:none;
    }
}
.none{
    width: 4.13rem;
    height: 4rem;
    margin: 4.5rem auto;
    img{
        width:100%;
        height:3.33rem;
    }
    p{
        text-align: center;
        margin-top:0.2rem;
        font-size: 13px;
        color: #666666;
    }
}
</style>